<template>
  <div class="wrapper">
    <div>
      <el-menu router style="height: 100vh;" :collapse-transition="false" :default-active=routeKey
        :collapse="isCollapse" @open="handleOpen" @close="handleClose">
        <el-menu-item v-for="(res, index) in menuList" :key="index" :index="res.index">
          <el-icon>
            <component :is="res.icon" />
          </el-icon>
          <template #title>{{ res.title }}</template>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 主内容区域 -->
    <div class="content-container">
      <div class="content-header">
        <el-radio-group v-model="isCollapse" class="content-header_card">
          <el-radio-button :value="isCollapse" @click="isCollapse = !isCollapse">{{ isCollapse ? "展开" :
            "收起" }}</el-radio-button>

          <div style="display: flex;align-items: center;gap: 10px;">
            <!-- <el-button class="fancy-button" @click="goVisualization">可视化大屏</el-button> -->
            <el-dropdown>
              <span style="margin-right: 20px;">
                <el-avatar :size="40" :src="squareUrl"></el-avatar>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>修改密码</el-dropdown-item>
                  <el-dropdown-item @click="goLogin">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>

          <!-- <el-button type="danger" style="margin-right: 10px;">退出登录</el-button> -->
        </el-radio-group>

      </div>
      <div class="content-body">
        <RouterView />
      </div>
    </div>
  </div>


</template>

<script setup>
import router from '../router'
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { Menu as IconMenu, HomeFilled,Tools,User ,Tickets,List} from '@element-plus/icons-vue'

const squareUrl=ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')

const menuList = [
  {
    index: '/layout/home',
    icon: HomeFilled,
    title: '工作台'
  },
  {
    index: '/layout/product',
    icon: Tickets,
    title: '攻略管理'
  },
 
  {
    index: '/layout/user',
    icon: User,
    title: '用户管理'
  },
  {
    index: '/layout/order',
    icon: List,
    title: '订单管理'
  },
   {
    index: '/layout/settings',
    icon: Tools,
    title: '系统设置'
  },

]
const route = useRoute()
const goLogin = () => {
  router.push('/login')
}

const isCollapse = ref(false)


let routeKey = ref(route.path)
const handleOpen = (key, keyPath) => {
  console.log('?', key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
watch(() => route.path, (newPath) => {
  routeKey.value = newPath
})
onMounted(() => {
  router.push('/layout/home')
})
</script>

<style>
.content-header_card {
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
}

.content-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.content-header {
  border-bottom: 1px solid #cfcfcf;
}

.content-body {
  overflow: auto;
  scrollbar-width: none;
}

.el-menu-item {
  min-width: 200px !important;
}

/* 按钮部分定制 */

.fancy-button {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  color: white;
  border: none;
  font-weight: bold;
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0, 198, 255, 0.6);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.fancy-button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 80%);
  animation: shine 2.5s infinite linear;
  pointer-events: none;
}

.fancy-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 24px rgba(0, 198, 255, 0.8);
}

@keyframes shine {
  0% {
    transform: translate(-100%, -100%) rotate(45deg);
  }
  100% {
    transform: translate(100%, 100%) rotate(45deg);
  }
}
</style>